import React, { useState, useEffect } from 'react'
import { Tabs, Input, Divider, Form } from 'antd';
import { ProForm, ProFormRadio, ProFormText, ProFormDatePicker, ProFormSelect, ProFormTextArea } from '@ant-design/pro-components';
import "./index.css"
import moment from 'dayjs';
import { pushList } from './api';
import { tab } from '@testing-library/user-event/dist/tab';
export default function Home() {
    // document.title = '选择需求类型'//设置标头
    const [isshow, setisShow] = useState(false);
    const onChange = (key: any) => {
        console.log(key);
    };
    // 所有数据
    const [list, setList] = useState<any>([])
    let push_List = async () => {
        let arr = list.reduce((acc: any, value: any) => {
            return { ...acc, ...value }
        })
        let res = await pushList(arr)
        console.log(res.data, '00000')
        // setList(res.data)
    }
    // 把选中的加入数组中
    const pushObj = (changeValues: any) => {
        list.push(changeValues)
        // 把list传入后端接口
        console.log(changeValues, '单条数据')
        // console.log(list, '最终数据')
    }
    // 提交
    const sumbit = () => {
        push_List()
    }
    // 取消编辑
    const tab = (props?: any) => {
        props.form?.resetFields()
    }
    var tabname = ['green', 'blue', 'pink'];
    return (
        <div>
            <p>保单与险种状态</p>
            <Tabs
                defaultActiveKey="1"
                type="card"
                onChange={onChange}
                style={{ marginLeft: '30px' }}
                items={tabname.map((item, i) => {
                    const id = String(i + 1);
                    return {
                        label: `${item}`,
                        key: id,
                        children: (
                            <ProForm
                                submitter={{
                                    // 配置按钮文本
                                    searchConfig: {
                                        resetText: '重置',
                                        submitText: '提交',
                                    },
                                    // 配置按钮的属性
                                    resetButtonProps: {
                                        style: {
                                            // 隐藏重置按钮
                                            display: 'none',
                                        },
                                    },
                                    submitButtonProps: {},

                                    // 完全自定义整个区域
                                    render: (props, doms) => {
                                        console.log(props, "012345678");
                                        return [
                                            <button className="one" type="button" key="submit" onClick={() => sumbit()}>
                                                提交
                                            </button>,
                                            <button className='two' type="button" key="rest" onClick={() => tab(props)}>
                                                取消编辑
                                            </button>,
                                        ];
                                    },
                                }}
                                layout="horizontal"
                                onValuesChange={(changeValues) => pushObj(changeValues)}

                            >
                                <div className='top'>
                                    <div className='top_left'>
                                        <ProFormSelect
                                            label="险种状态"
                                            name="Coverage_status"
                                            style={{ width: '400px', float: "right" }}
                                            options={[
                                                {
                                                    value: '有效',
                                                    label: '有效'
                                                },
                                                {
                                                    value: '无效',
                                                    label: '无效',
                                                },
                                            ]}
                                            initialValue=""
                                            width="xs"
                                            rules={[{ required: true, message: '请输入正确的信息' }]}
                                        />
                                        <ProFormDatePicker
                                            label="险种生效日期"
                                            name='Coverage_effective_date'
                                        />
                                        <ProFormSelect
                                            style={{ width: '400px', float: "right" }}
                                            options={[
                                                {
                                                    value: '通过',
                                                    label: '通过',
                                                },
                                                {
                                                    value: '不通过',
                                                    label: '不通过',
                                                },
                                            ]}

                                            width="xs"
                                            label="被保人1核保结论"
                                            name="name_one"
                                        />

                                    </div>
                                    <div className='top_right'>
                                        <div className='ishow'>
                                            <ProFormRadio.Group
                                                label="险种加费"
                                                name="Coverage_rate"
                                                initialValue="无"
                                                options={['无', '有']}
                                                fieldProps={{
                                                    onFocus: () => {
                                                        setisShow(!isshow)
                                                    },
                                                }}
                                            />

                                            <Form.Item
                                                name="amount"
                                                getValueFromEvent={(event: any) => {
                                                    return event.target.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3'); // 只能输入两位小数
                                                }}
                                                rules={[
                                                    {
                                                        required: true,
                                                        pattern: new RegExp(/^(([1-9]\d*)|\d)(\.\d{1,2})?$/, 'g'), // 只能输入数字跟小数点 两位小数
                                                        message: '请输入正确的金额',
                                                    },
                                                ]}
                                            >
                                                <Input
                                                    prefix="￥" suffix="元" style={{ width: '120px', height: '30px', display: isshow ? 'flex' : 'none' }} />
                                            </Form.Item>


                                        </div>
                                        <ProFormDatePicker
                                            label="险种终止日期"
                                            name='Coverage_expiry_date'
                                        />
                                        <ProFormSelect
                                            style={{ width: '400px', float: "right" }}
                                            options={[
                                                {
                                                    value: '通过',
                                                    label: '通过',
                                                },
                                                {
                                                    value: '不通过',
                                                    label: '不通过',
                                                },
                                            ]}

                                            width="xs"
                                            label="被保人2核保结论"
                                            name="name_two"
                                        />

                                    </div>
                                </div >
                                <Divider />
                                <div className="footer">
                                    <div className="footer_left">
                                        <ProFormText
                                            style={{ width: '400px', float: "right" }}
                                            label="保单号"
                                            name="Policy_number"
                                            placeholder="请输入"
                                            colProps={{ span: 12 }}
                                        />
                                        <ProFormDatePicker
                                            label="保单生效日期"
                                            name='Policy_start_date'
                                        // initialValue={moment('')} 
                                        />
                                        <ProFormDatePicker
                                            label="核保通过日期"
                                            name='guarantee_one'
                                        // initialValue={moment('')} 
                                        />

                                    </div>
                                    <div className="footer_right">
                                        <ProFormSelect
                                            style={{ width: '400px', float: "right" }}
                                            options={[
                                                {
                                                    value: '有',
                                                    label: '有',
                                                },
                                                {
                                                    value: '无',
                                                    label: '无',
                                                },
                                            ]}
                                            initialValue=""
                                            width="xs"
                                            label="保单状态"
                                            name="Policy_state"
                                            rules={[{ required: true, message: '请输入正确的信息' }]}
                                        />
                                        <ProFormDatePicker
                                            label="保单终止日期"
                                            name='Policy_end_date'
                                        />
                                        <ProFormTextArea width="xl" label="备注详情" name="remark" />
                                    </div>
                                </div>
                            </ProForm>

                        )
                    };
                })}
            />
        </div >
    )
}
